import React from 'react';
import { Box, MainButton, Text } from '@nova-hf/ui';
import { MainButtonProps } from '@nova-hf/ui/umd/ts/src/buttons/MainButton/MainButton';

type SettingsButtonsProps = {
  cancelButton?: MainButtonProps;
  confirmButton: MainButtonProps;
  buttonDescription?: string;
};

export const SettingsButtons = ({
  cancelButton,
  confirmButton,
  buttonDescription,
}: SettingsButtonsProps) => {
  return (
    <Box
      display="flex"
      marginTop={6}
      justifyContent={buttonDescription && !cancelButton ? 'space-between' : 'flex-end'}
      flexDirection={{ sm: 'column', md: 'row' }}
    >
      {cancelButton?.text && (
        <Box display="flex" width={{ sm: '100%', md: '4/12' }} marginBottom={3} marginRight={3}>
          <MainButton {...cancelButton} />
        </Box>
      )}
      <Box
        display="flex"
        flexDirection="row"
        alignItems="center"
        width={{ sm: '100%', md: buttonDescription && !cancelButton ? '11/12' : '4/12' }}
      >
        {buttonDescription && !cancelButton && (
          <Box marginBottom={3} width={'8/12'}>
            <Text variant="pLargeBold">{buttonDescription}</Text>
          </Box>
        )}
        <Box marginBottom={3} width={buttonDescription && !cancelButton ? '4/12' : '100%'}>
          <MainButton {...confirmButton} />
        </Box>
      </Box>
    </Box>
  );
};